<template>
  <el-aside>
    <h-logo />
    <el-scrollbar :style="{ height: 'calc(100vh - 64px)' }">
      <el-menu router class="h-screen divide-y" default-active="2">
        <template v-for="(item, index) in routes" :key="index">
          <template v-if="item.meta.level !== 1 && item.children?.length">
            <!-- sub -->
            <el-sub-menu :index="item.path">
              <template #title>
                <el-icon v-if="item.meta.icon">
                  <component :is="item.meta.icon" />
                </el-icon>
                {{ item.meta.title }}
              </template>
              <template v-for="(subItem, subIndex) in item.children" :key="subIndex">
                <!-- hidden:true 不进行渲染 -->
                <template v-if="!subItem.meta.hidden">
                  <el-menu-item :index="subItem.path" style="--el-menu-level: 2">{{ subItem.meta.title }}</el-menu-item>
                </template>
              </template>
            </el-sub-menu>
          </template>
          <template v-else>
            <!-- single -->
            <el-menu-item :index="item.path">
              <template #title>
                <el-icon v-if="item.meta.icon">
                  <component :is="item.meta.icon" />
                </el-icon>
                {{ item.meta.title }}</template
              ></el-menu-item
            >
          </template>
        </template>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<script setup>
const router = useRouter()
const layout = router.options.routes.find(item => item.path === '/')
const routes = layout.children
</script>

<style scoped>
.el-aside {
  --el-aside-width: 240px;
}
.el-scrollbar__wrap,
.el-scrollbar__view,
.el-scrollbar__view ul {
  height: calc(100vh - 65px);
}
</style>
